<template>
  <div class="comTable">
    <!-- 收索 -->
    <slot
      name="search"
      v-if="$attrs.search"
    >
      <el-input
        :placeholder="$attrs.placeholder"
        v-model="input"
        style="width:200px"
        @keyup.enter.native="handleSearch"
        clearable
      >
      </el-input>
      <el-button
        icon="el-icon-search"
        type="info"
        @click="handleSearch"
      > </el-button>
    </slot>

    <!-- 增加 -->
    <el-button
      type="primary"
      class="addBtn"
      @click="$emit('handleAdd')"
      v-if="$attrs.add"
    >{{$attrs.add}}</el-button>

    <!-- 数据table -->
    <el-table
      border
      :data="tableData"
      style="width: 100%;min-width:588px"
      :header-cell-style="{ background: '#fafafa' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="$attrs.selection"
        type="selection"
      ></el-table-column>
      <el-table-column
        v-for="item in columnFilter"
        :key="item.id"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sortable"
      >
        <!-- 这个scope.roW可以获取到tableData的每一项 -->
        <template v-slot="scope">
          <!-- 插槽:tag/操作 -->
          <slot
            v-if="item.type == 'slot' && item.slot_name"
            :name="item.slot_name"
            :row="scope.row"
            :index="scope.$index"
          >默认字段</slot>
          <!-- 原先的和tableData每行对应的内容  写了template和slot-scope则必须手动写 每行row要显示的内容-->
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="$attrs.currentPage"
      :page-sizes="$attrs.pageSizes"
      :page-size="$attrs.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="$attrs.total"
      :pager-count="5"
      v-if="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "comTable",
  inheritAttrs: false,
  data() {
    return {
      input: '',
    };
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    column: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Boolean,
      default: true
    }
    // 其他的可以使用$attrs获取（attrs获取父组件传入 但是子组件未接受的数据）
  },
  methods: {
    handleSizeChange(pageSize) {
      // console.log("组件内部", pageSize);
      // this.$emit("update:pageSize", pageSize)
      this.$emit("size-change", pageSize)

    },
    handleCurrentChange(currentPage) {
      // console.log("组件内部", currentPage);
      // this.$emit("update:currentPage", currentPage)
      this.$emit("current-change", currentPage)
    },
    handleSearch() {
      this.$emit("handleSearch", this.input)
    },
    handleSelectionChange(multipleSelection) {
      this.$emit('selection-change', multipleSelection)
    }
  },

  computed: {
    columnFilter() {
      return this.column.filter((item) => {
        return !item.hide;
      });
    },
  },
};
</script>

<style scoped>
.el-table {
  /* max-height: calc(8 * 71px + 82px); */
  height: 622px;
  overflow: auto;
}
.addBtn {
  position: absolute;
}
.el-pagination {
  margin: 10px;
  text-align: center;
}
::v-deep .el-checkbox__inner {
  border: 1px solid rgb(165, 165, 165);
}
</style>